/* decorateBox.scss */
@charset "UTF-8";
@import "common/var";
@import "mixins/mixins";

@include b(decorateBox) {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba($color: $--color-linearStart, $alpha: 0.8), rgba($color: $--color-linearEnd, $alpha: 0.85));
  border-top: 0.5px solid rgba($color: $--color-primary, $alpha: 0.4);
  border-bottom: 0.5px solid rgba($color: $--color-primary, $alpha: 0.4);
  position: relative;
  overflow: hidden;
  .title {
    width: calc(100% - 20px);
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $--color-font;
    font-size: 20px;
    font-weight: 500;
    background: url("~szkstool/assets/section_icon.png") no-repeat 0 0/45%
      100%;
    padding-left: 40px;
    margin-top: 10px;
    margin-left: 10px;
    .titleSlot {
      height: 30px;
      display: flex;
      align-items: center;
      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 5px;

        .item {
          width: 30px;
          height: 30px;
          background-color: rgba($color: $--color-bgColor, $alpha: 0.4);
          border: 1px solid rgba($color: $--color-primary, $alpha: 0.5);
          margin-left: 10px;
          display: flex;
          align-items:center;
          justify-content: center;

          i {
            padding: 0px 4px;
            font-size: 20px;
            &:hover {
              color: $--color-active;
            }
          }
        }
      }
    }
    .name {
      display: flex;
      align-items: center;
      .detailIcon {
        cursor: pointer;
        padding-left: 8px;
        i {
          font-size: 25px;
          &:hover {
            color: $--color-active;
          }
        }
      }
    }
    ::before {
      content: "";
      display: block;
      width: 15px;
      height: 2px;
      background-color: rgba($color: $--color-primary, $alpha: 1);
      position: absolute;
      left: 0;
      top: 0;
}
    ::after {
      content: "";
      display: block;
      width: 15px;
      height: 2px;
      background-color: rgba($color: $--color-primary, $alpha: 1);
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .clickedTitle {
    cursor: pointer;
  }
  .clickedTitle:hover {
    color: $--color-active;
  }
  &-content {
    height: calc(100% - 36px);
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid rgba($color: $--color-primary, $alpha: 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: $--color-font;
  }
  .noTitle {
    height: 100%;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
}